<template>
	<div :class="{[prefixCls+'-collapse-item']:true,'mj-collapse-item-active':paneShow}">
		<div :class="[prefixCls+'-collapse-hd']" @click="onClick(name)">
			<div>{{ title }}</div>
		</div>
		<transition name="slide" 
			@before-enter="beforeEnter" 
			@enter="enter" 
			@leave="leave">
			<div :class="[prefixCls+'-collapse-bd']" v-show="paneShow" ref="pane1">
				<div :class="[prefixCls+'-collapse-content']" ref="pane2">
					<slot></slot>
				</div>
			</div>
		</transition>
	</div>
</template>

<script>
import { prefixCls } from '../prefix'

export default {
	name: `${prefixCls}CollapseItem`,
	props:['title','name'],
	data() {
		return {
			prefixCls: prefixCls,
			paneShow:false,//显示元素
			accordion:false,//手风琴效果
		}
	},
	mounted(){
		const _this = this;
		const parent = this.$parent;
		// 设置默认展开元素
		if(parent.value == _this.name){
			_this.paneShow = true
			_this.$refs.pane1.style = 'transition:none'
	    	setTimeout(()=>{
	    		_this.$refs.pane1.removeAttribute("style")
	    	})
		}
    	// 如果设置了手风琴效果
    	if(parent.accordion){
    		_this.accordion = true
    	}
	},
	methods:{
		onClick(val){
			this.paneShow = !this.paneShow;
			const parent = this.$parent;
			parent.change(val);

			if(this.accordion){
				parent.onAccordion(val);
			}
		},
	    beforeEnter: function (el) {
	    	// console.log('动画enter之前',el);
	    },
	    enter:function(el,done){
	    	// console.log('动画enter进入',el);
	    	this.$refs.pane1.style.height = this.$refs.pane2.offsetHeight+'px'
	    },
	    leave: function (el, done) {
	    	el.style.height = el.offsetHeight+'px'
	    	setTimeout(()=>{
	    		el.removeAttribute("style")
	    	},300)
	    },
	}
}
</script>

<style> 
.slide-enter-active, .slide-leave-active {
    transition: height .3s ease; 
}
.slide-enter, .slide-leave-to {
    height:0!important;
}
</style>